<template id="info">
  <div>
    <!--图像和昵称-->
    <div class="info">
      <img src="../../assets/image/my_pic.png" alt="个人头像">
      <div class="nickname row">
        <i class="icon iconfont icon-xingbie-nv"></i>
        <span>中银大厦</span>
      </div>
    </div>
    <!--个人信息-->
    <div class="info-content">
      <ul class="info-list">

        <!--<li class="info-item row" v-for="(item,k) in info_list">-->
          <!--<span>{{k}}</span>-->
          <!--<span class="val">{{item}}</span>-->
        <!--</li>-->
        <li class="info-item row">
          <span>预留信息</span>
          <span class="val"> --- </span>
        </li>
        <li class="info-item row">
          <span>姓名</span>
          <span class="val">{{info_list.cusname}}</span>
        </li>
        <li class="info-item row">
          <span>性别</span>
          <span class="val">{{info_list.sex == 1? '男': '女'}}</span>
        </li>
        <li class="info-item row">
          <span>国籍</span>
          <span class="val"> --- </span>
        </li>
        <li class="info-item row">
          <span>手机号</span>
          <span class="val" v-if="info_list.mobileno">{{info_list.mobileno}}</span>
          <span class="val" v-else=""> --- </span>
        </li>
        <li class="info-item row">
          <span>电子邮箱</span>
          <span class="val" v-if="info_list.email">{{info_list.email}}</span>
          <span class="val" v-else=""> --- </span>
        </li>
      </ul>
    </div>
  </div>

</template>
<script>

  export default {
    data () {
      return {
        info_list:{}
      }
    },
    methods: {

    },
    //获取后台数据，dom渲染之前
    created: function(){

      var that = this;

      this.$post(this.$urlAll.user_info).then(function (response) {

        that.info_list = response.t;

        console.log(that.info_list);

      })

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../style/common.css";
  .info{
    width: 100%;
    height: 1.97rem;
    position: relative;
    background: url("../../assets/image/myInfo_bg2.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
  }
  .info>img{
    width: 0.73rem;
    height: 0.73rem;
    border: 0.01rem solid #ffffff;
    -webkit-border-radius:50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    top: 0.54rem;
  }
  .info .nickname{
    font-size: 0.16rem;
    color: #333333;
    width:100%;
    position: absolute;
    bottom: 0.35rem;
    align-items: center;
    justify-content: center;
  }
  .info .nickname>.iconfont.icon-xingbie-nv{
    font-size: 0.2rem;
    color: #ff4444;
  }
  .info .nickname span{
    font-size: 0.16rem;
    margin: 0 0.3rem 0 0.05rem;
  }
  .info-list .info-item{
    height: 0.44rem;
    color: #333333;
    background: #FFFFFF;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.1rem;
  }
  .info-list .info-item:nth-child(odd){
    margin-top: 0.1rem;
    border-bottom:0.01rem solid #EEEEEE;
  }
  .info-list .info-item .val{
    font-size: 0.13rem;
    color: #666666;
  }
</style>

